<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.tab{
				bord er: 1px solid red;
				width: 200px;
				margin-top: 100px;
				margin-left: 300px;
			}
			button{
				padding: 12px;
			}
			#t1{
				background-color: #ffd70b;
			}
			#t2{
				background-color: #e3e1e2;
			}
			#t3{
				background-color: #e3e1e2;
			}
			#context{
				width: 400px;
				height: 300px;
				bor der: 1px solid red;
				background-color: #ffd70b;
				text-align: center;
				line-height: 300px;
				font-size: 20px;
				margin-left: 300px;
			}
		</style>
	</head>
	<body>
		<div class="tab">
		<button id="t1">tab01</button>
		<button id="t2">tab02</button>
		<button id="t3">tab03</button>
		</div>
		<div id="context">
			<p id="c1" style="display: block;">tab文字内容一</p>
			<p id="c2" style="display: none;">tab文字内容二</p>
			<p id="c3" style="display: none;">tab文字内容三</p>
		</div>
		
		<script>
			$("#t2").click(function(){
				$("#t2").css("background-color","#ffd70b");
				$("#t2").siblings().css("background-color","#e3e1e2");
				$("#c2").css("display","block");
				$("#c2").siblings().css("display","none");
			});
			$("#t3").click(function(){
				$("#t3").css("background-color","#ffd70b");
				$("#t3").siblings().css("background-color","#e3e1e2");
				$("#c3").css("display","block");
				$("#c3").siblings().css("display","none");
			});
			$("#t1").click(function(){
				$("#t1").css("background-color","#ffd70b");
				$("#t1").siblings().css("background-color","#e3e1e2");
				$("#c1").css("display","block");
				$("#c1").siblings().css("display","none");
			});
		</script>
	</body>
</html>